<template>
  <div class="app-container">
    <div class="operator-container">
      <el-button
          v-hasPermi="['system:dept:create']"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="regionCreate"
      >添加区域
      </el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" row-key="id" style="width: 100%;margin-bottom: 20px;" border="">

      <el-table-column label="区域名称" prop="name" />

      <el-table-column label="操作"  >
        <template #default="scope">
          <el-button
              v-hasPermi="['system:dept:update']"
              v-if="scope.row.type==1"
              type="text"
              size="small"
              @click.native.prevent="handleUpdate(scope.row)"
          >
            编辑
          </el-button>

          <el-button
              v-hasPermi="['system:dept:delete']"
              v-if="scope.row.type==1"
              type="text"
              size="small"
              @click.native.prevent="handDelete(scope.row)"
          >
            删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <el-dialog
        :title="textMapL1[Level1DialogFormStatus]"
        v-model="Level1DialogFormVisable"
        width="40%"
    >
      <el-form ref="l1Form" :model="level1Form" :rules="l1Rules" style="width:80%;">
        <el-form-item label="区域名称" label-width="120px" prop="name">
          <el-input v-model="level1Form.name" autocomplete="off" size="small" type="text" placeholder="请输入区域名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button v-if="Level1DialogFormStatus=='create'" type="primary" @click="submitForm('l1Form')">确 定</el-button>
        <el-button v-if="Level1DialogFormStatus=='update'" type="primary" @click="updateForm('l1Form')">保 存</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script setup name="Area">
import { listRegion, createRegion, deleteRole, updateRegion } from "@/api/system/area"

const { proxy } = getCurrentInstance();

const list = ref([]);
const listLoading = ref(true);
const downloadLoading = ref(false);
const Level1DialogFormVisable = ref(false);
const Level1DialogFormStatus = ref("");

const data = reactive({
  level1Form: {
    name: '',
    type: 1
  },
    l1Rules: {
      name: [
        {required: true, message: '请输入区域名称', trigger: 'blur'}
      ]
    },
    textMapL1: {
      update: '编辑区域',
      create: '创建区域'
    }
});
const { level1Form, l1Rules, textMapL1 } = toRefs(data);

/** 查询区域列表 */
function getList() {
  listLoading.value = true
  listRegion().then(response => {
    list.value = response.data
    listLoading.value = false
  }).catch(() => {
    list.value = []
    listLoading.value = false
  })
}

/** 区域添加按钮 */
function regionCreate(){
  Level1DialogFormStatus.value = 'create'
  Level1DialogFormVisable.value = true
  // this.$nextTick(() => {
  //   this.$refs['l1Form'].resetFields()
  // })
  level1Form.type = 1
}

/** 区域编辑按钮 */
function handleUpdate(row){
    level1Form.value = row
    Level1DialogFormStatus.value = 'update'
    Level1DialogFormVisable.value = true
}

/** 区域删除按钮 */
function handDelete(row){
  proxy.$confirm('确认执行此次操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteRole(row)
        .then(response => {
          proxy.$modal.msgSuccess("删除成功");
          this.getList()
        })
        .catch(response => {
          proxy.$modal.msgError("删除失败")
        })
  })
}

/** dialog 关闭按钮 */
function closeDialog() {
  Level1DialogFormVisable.value = false
  level1Form.name.value = null
}

/** 添加区域 */
function submitForm() {
  proxy.$refs["l1Form"].validate(valid => {
    if (valid) {
      createRegion(level1Form.value).then(response => {
        proxy.$modal.msgSuccess("添加成功");
        Level1DialogFormVisable.value = false
        this.getList()
      })
    }
  })
}

function updateForm(){
  proxy.$refs["l1Form"].validate(valid => {
    if (valid) {
      updateRegion(level1Form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        Level1DialogFormVisable.value = false
        this.getList()
      })
    }
  })
}

getList();
</script>
